

import { App } from "../../application";
import Events from "../../application/constants/Events";
import GeoUtils from "../../utils/GeoUtils";
import { Widget } from "./Widget";

/**比例尺
 * @param name 比例尺值
 */
class Scale extends Widget{
    private dom;
    private resolution: string;
    private widthScale: number;
    private app: App;

    constructor() {
        super();
        this.app = App.getInstance();
        this.widthScale = Math.max(this.app.three.domElement.clientWidth / 15, 100);
        this.resolution = this.getResolutionStr();

        let ui = this.app.ui;
        ui.setCustomCSS({
            className: 'scale_line',
            callBack: () => {
                return `
                    width:${this.widthScale}px;
                    height:7px;
                    border-bottom:3px solid rgba(0,0,0,.85);
                    text-align: center;
                    position: fixed;
                    right: 60px;
                    bottom: 20px;
                    z-index: 10;
                    line-height:0px;
                    border-left:1px solid rgba(0,0,0,.85);
                    border-right:1px solid rgba(0,0,0,.85);
                    padding-bottom: 7px;
                `;
            },
        });
        
        // this.app.on(Events.MouseWheel, (event) => {
        //     let resolutionStr = this.getResolutionStr();
        //     this.setResolution(resolutionStr);
        // }, this);
        this.app.on(Events.ForceRefreshMap, (event) => {
            let resolutionStr = this.getResolutionStr();
            this.setResolution(resolutionStr);
        })

        let self = this;
        this.app.on(Events.Resize, function(){
            this.widthScale = Math.max(this.app.three.domElement.clientWidth / 15, 100);
            this.resolution = self.getResolutionStr();
            self.setResolution(this.resolution);
        }, this);
    }

    private getResolutionStr() {
        let resolution = GeoUtils.getCurResolution() * this.widthScale;
        let resolutionStr;
        if (resolution < 1000) {
            resolutionStr = resolution.toFixed(0) + '米';
        }else{
            resolution = resolution / 1000;
            resolutionStr = resolution.toFixed(0) + '公里';
        }
        return resolutionStr;
    }

    /**
     * 加载元素
     * @param className 按钮类名 默认值：'scale_line'
     * @param parentClassName 容器类名 默认值：document.body
     */
    public loadToDom(className = 'scale_line', parentClassName?: string) {
        const app = parentClassName ? document.getElementsByClassName(parentClassName)[0] : document.body;
        this.dom = document.createElement('div');
        this.dom.style.userSelect = 'none'; //解决鼠标粘连的问题
        const lineLeft = document.createElement('div');
        const lineRight = document.createElement('div');
        this.dom.innerText = this.resolution;
        this.dom.setAttribute('class', className);
        lineLeft.setAttribute('class', 'line_left');
        lineRight.setAttribute('class', 'line_right');
        this.dom.appendChild(lineLeft);
        this.dom.appendChild(lineRight);
        app.appendChild(this.dom);
    }

    private setResolution(resolution: string) {
        this.resolution = resolution;
        this.dom.innerText = this.resolution;

    }

    public dispose(){
        if(!this.dom || !this.dom.parentNode){
            return;
        }
        this.dom.parentNode.removeChild(this.dom)
    }
}

export { Scale };
